<template>
  <div class="blog_container">
    <el-row>
      <FunctTop
        :formData="formData"
        :classNameList="classNameList"
        @getBlurArt="getBlurArt"
        @addArticle="addArticle"
      ></FunctTop>
    </el-row>
    <el-row>
      <el-col :span="24">

        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          min-height="410px"
          class="el_table"
          @selection-change="selectChange"
        >
          <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
          <el-table-column
            label="标题"
            pror="title"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span style="color: orange; font-size: 16px">{{
                scope.row.title
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="标签"
            pror="tags"
            width="150"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-tag
                v-for="(item, index) in scope.row.tags"
                :key="index"
                :type="item == 'Vue' ? 'primary' : 'success'"
                disable-transitions
                size="mini"
                >{{ item }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="分类" pror="class_name" width="120">
            <template slot-scope="scope">{{ scope.row.class_name }}</template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="150px">
            <template slot-scope="scope">
              <el-button
                @click="editArticle(scope.row)"
                type="danger"
                size="small"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="deleteArticle(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <section>
      <Pagination
        :options="options"
        @currentChange="currentChange"
        @sizeChange="sizeChange"
      ></Pagination>
    </section>

    <Dialog
      :dialog="dialog"
      :formData="formData"
      :classNameList="classNameList"
      @getArticle="getArticle"
    ></Dialog>
  </div>
</template>

<script>
import Dialog from "./Dialog.vue";
import FunctTop from "./FunctTop.vue";
import Pagination from "../../../../components/Pagination.vue";
export default {
  name: "blogmanage",
  created() {
    this.getClass();
    this.getArticle();
  },
  data() {
    return {
      tableData: [],
      selectArt: [],
      //dialog组件所需要用到的两个数据
      dialog: {
        show: false,
        option: "add",
        title: "创建文章",
      },
      formData: {
        title: "",
        body_html: "",
        body_md: "",
        look_number: 0,
        give_like_number: 0,
        collect_number: 0,
        create_user: "",
        class_name: "",
        tags: [],
        id: "",
      },
      //需要从后端接口获取文章分类列表
      classNameList: [],
      //分页器
      options: {
        total: 0, //全部总数
        pageSize: 10, //每页几条数据
        currentPage: 1, //当前页
      },
    };
  },
  methods: {
    addArticle() {
      //先把dialog的数据来源清空
      this.formData.title = "";
      this.formData.body_md = "";
      this.formData.create_user = "";
      this.formData.class_name = "";
      this.formData.tags = "";
      this.formData.id = "";
      //改变dialog的标题和显示控制
      this.dialog.option = "add";
      this.dialog.title = "新建文章";
      this.dialog.show = true;
    },
    getClass() {
      this.$axios.get("/api/class/getAll").then((res) => {
        console.log(res);
        res.data.doc.forEach((item, index) => {
          this.classNameList.push(item.class_name);
        });
      });
    },
    getArticle() {
      const api = `/api/article/getPart/${this.options.currentPage}/${this.options.pageSize}`;
      this.$axios.get(api).then((res) => {
        console.log(res.data);
        this.options.total = res.data.articleNum;
        this.tableData = res.data.doc;
      });
    },
    selectChange(val) {
      this.selectArt = val;
    },
    editArticle(info) {
      this.dialog.option = "edit";
      this.dialog.title = "修改文章";

      this.formData.title = info.title;
      this.formData.body_md = info.body_md;
      this.formData.create_user = info.create_user;
      this.formData.class_name = info.class_name;
      this.formData.tags = info.tags;
      this.formData.id = info._id;
      this.dialog.show = true;
    },
    deleteArticle(info) {
      this.$axios.delete(`/api/article/delete/${info._id}`).then((res) => {
        if (res.data.state == 1) {
          this.$message({
            message: res.data.message,
            type: "success",
          });
          this.getArticle();
        } else if (res.data.state == 0) {
          this.$message({
            message: res.data.message,
            type: "error",
          });
        }
      });
    },
    currentChange(current) {
      this.options.currentPage = current;
      this.getArticle();
    },
    sizeChange(pageSize) {
      this.options.pageSize = pageSize
      this.getArticle();
    },
    //模糊查询，获取文章
    getBlurArt(data) {
      console.log(data);
      this.tableData = data;
    },
  },
  filters: {
    ellipsis(value, limit) {
      if (!value) return "";
      if (value.length > limit) {
        return value.slice(0, limit) + "...";
      }
      return value;
    },
  },
  components: {
    Dialog,
    FunctTop,
    Pagination,
  },
};
</script>

<style scoped lang="scss">
.blog_container {
  width: 100%;
  .post_btn {
    height: 40px;
    color: #fff;
  }
  // .el_table {
  //   //溢出不换行
  //   table-layout: fixed;
  //   .el_column {
  //     overflow: hidden; //超出的文本隐藏
  //     text-overflow: ellipsis; //溢出用省略号显示
  //     // white-space: nowrap;
  //   }
  // }
  .el-table th,
  .el-table td {
    height: 60px !important;
  }

  .cell {
    line-height: 60px;
  }
}
</style>